// External dependencies
// @import "leaflet/measure";
@import "leaflet/modal";
@import "leaflet/easy-button";
@import "leaflet/label";
@import "leaflet/fullscreen";
@import "leaflet/tooltip";

/* required styles */

.leaflet-map-pane, .leaflet-tile, .leaflet-marker-icon, .leaflet-marker-shadow, .leaflet-tile-pane, .leaflet-tile-container, .leaflet-overlay-pane, .leaflet-shadow-pane, .leaflet-marker-pane, .leaflet-popup-pane, .leaflet-overlay-pane svg, .leaflet-zoom-box, .leaflet-image-layer, .leaflet-layer {
  position: absolute;
  left: 0;
  top: 0;
}

.leaflet-container {
  overflow: hidden;
  -ms-touch-action: none;
}

.leaflet-tile, .leaflet-marker-icon, .leaflet-marker-shadow {
  @include user-select(none);
}

.leaflet-marker-icon, .leaflet-marker-shadow {
  display: block;
}

/* map is broken in FF if you have max-width: 100% on tiles */

.leaflet-container img {
  max-width: none !important;
  &.leaflet-image-layer {
    max-width: 15000px !important;
  }
}

/* stupid Android 2 doesn't understand "max-width: none" properly */

.leaflet-tile {
  filter: inherit;
  visibility: hidden;
}

.leaflet-tile-loaded {
  visibility: inherit;
}

.leaflet-zoom-box {
  width: 0;
  height: 0;
}

/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */

.leaflet-overlay-pane svg {
  -moz-user-select: none;
}

.leaflet-tile-pane {
  z-index: 2;
}

.leaflet-objects-pane {
  z-index: 3;
}

.leaflet-overlay-pane {
  z-index: 4;
}

.leaflet-shadow-pane {
  z-index: 5;
}

.leaflet-marker-pane {
  z-index: 6;
}

.leaflet-popup-pane {
  z-index: 7;
}

.leaflet-vml-shape {
  width: 1px;
  height: 1px;
}

.lvml {
  behavior: url(#default#VML);
  @include inline-block;
  position: absolute;
}

/* control positioning */

.leaflet-control {
  position: relative;
  z-index: 7;
  pointer-events: auto;
}

.leaflet-top, .leaflet-bottom {
  position: absolute;
  z-index: 10;
  pointer-events: none;
}

.leaflet-top {
  top: 0;
  z-index: 11;
}

.leaflet-right {
  right: 0;
}

.leaflet-bottom {
  bottom: 0;
}

.leaflet-left {
  left: 0;
}

.leaflet-control {
  float: left;
  clear: both;
}

.leaflet-right .leaflet-control {
  float: right;
}

.leaflet-top .leaflet-control {
  margin-top: 10px;
}

.leaflet-bottom .leaflet-control {
  margin-bottom: 10px;
}

.leaflet-left .leaflet-control {
  margin-left: 10px;
}

.leaflet-right .leaflet-control {
  margin-right: 10px;
}

/* zoom and fade animations */

.leaflet-fade-anim {
  .leaflet-tile, .leaflet-popup {
    opacity: 0;
    @include transition(opacity 0.2s linear);
  }
  .leaflet-tile-loaded, .leaflet-map-pane .leaflet-popup {
    opacity: 1;
  }
}

.leaflet-zoom-anim {
  .leaflet-zoom-animated {
    @include transition(transform 0.25s cubic-bezier(0, 0, 0.25, 1));
  }
  .leaflet-tile {
    @include transition(none);
  }
}

.leaflet-pan-anim .leaflet-tile, .leaflet-touching .leaflet-zoom-animated {
  @include transition(none);
}

.leaflet-zoom-anim .leaflet-zoom-hide {
  visibility: hidden;
}

/* cursors */

.leaflet-clickable {
  cursor: pointer;
}

.leaflet-container {
  cursor: -webkit-grab;
  cursor: -moz-grab;
}

.leaflet-popup-pane, .leaflet-control {
  cursor: auto;
}

.leaflet-dragging {
  .leaflet-container, .leaflet-clickable {
    cursor: move;
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
  }
}

/* visual tweaks */

.leaflet-container {
  background: #ddd;
  outline: 0;
}

.leaflet-zoom-box {
  border: 2px dotted #38f;
  background: rgba(255, 255, 255, 0.5);
}

/* general typography */

.leaflet-container {
  font: $fs-small/$lh-small $base-font-family;
}

/* general toolbar styles */

.leaflet-control-layers-toggle {
  background-position: 50% 50%;
  background-repeat: no-repeat;
  display: block;
}


.leaflet-bar {
  $default-opacity: 0.8;
  @include menu;
  // box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
  // @include border-radius($default-border-radius * 2);
  // border: $default-border-radius solid rgba($neutral-color, $default-opacity / 2);
  a {
    @include user-select(none);
    @include is-icon;
    // background-color: rgba($mapbar-background-color, $default-opacity);
    border-bottom: $menu-border;
    width: $map-button-size;
    height: $map-button-size;
    line-height: $map-button-size;
    display: block;
    @include text-align(center);
    text-decoration: none;
    color: $active-link-color;
    @include transition(background 0.2s);
    &:hover {
      outline: none;
      background: background-hover($menu-background);
      //background-color: background-hover($mapbar-background-color);
    }
    &:first-child {
      // @include border-top-radius($default-border-radius);
    }
    &:last-child {
      // @include border-bottom-radius($default-border-radius);
      border-bottom: none;
    }
    &.leaflet-disabled {
      &,
      &:active,
      &:focus,
      &:hover {
        outline: none;
        cursor: default;
        // background-color: rgba($neutral-color, $default-opacity);
        background-color: $menu-border-color;
        // color: $text-color;
        @include opacity(0.5);
        // @include text-shadow(-1px -1px 0 white);
      }
    }
    .leaflet-touch & {
      width: 30px;
      height: 30px;
      line-height: 30px;
    }
    background-position: 50% 50%;
    background-repeat: no-repeat;
    display: block;
  }
}

/* zoom control */
.leaflet-control-zoom-in, .leaflet-control-zoom-out {
  @include text-align(center);
}

.leaflet-control-zoom-in {
  @include use-icon(plus);
}

.leaflet-control-zoom-out {
  @include use-icon(minus);
}

.leaflet-control-zoom-fullscreen {
  @include use-icon(arrows-alt);
}

.leaflet-touch {
  .leaflet-control-zoom-in {
    font-size: 22px;
  }
  .leaflet-control-zoom-out {
    font-size: 24px;
  }
}

/* layers control */

.leaflet-control-layers {
  @include menu-box;
  .leaflet-control-layers-toggle {
    color: $active-link-color;
    @include is-icon;
    @include use-icon(layers);
    @include text-align(center);
    width: $map-button-size;
    height: $map-button-size;
    line-height: $map-button-size;
  }
}



.leaflet-retina .leaflet-control-layers-toggle {
  // background-image: url(images/layers-2x.png);
  background-size: 26px 26px;
}

.leaflet-touch .leaflet-control-layers-toggle {
  width: 44px;
  height: 44px;
}

.leaflet-control-layers .leaflet-control-layers-list {
  display: none;
}

.leaflet-control-layers-expanded {
  .leaflet-control-layers-toggle {
    display: none;
  }
  .leaflet-control-layers-list {
    display: block;
    position: relative;
    .leaflet-control-layers-separator {
      height: 0;
      border-top: $menu-border;
    }
    .leaflet-control-layers-base, .leaflet-control-layers-overlays {
      padding: $default-gap;
      label {
        &, * {
          vertical-align: middle;
          line-height: $lh-normal;
        }
      }
    }
  }
}

.leaflet-control-layers-selector {
  margin-top: 2px;
  position: relative;
  top: 1px;
}

.leaflet-control-layers label {
  display: block;
}


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
  background: #fff;
  background: rgba(255, 255, 255, 0.7);
  margin: 0;
}

.leaflet-control-attribution, .leaflet-control-scale-line {
  padding: 0 5px;
  color: #333;
}

.leaflet-control-attribution a {
  text-decoration: none;
  &:hover {
    text-decoration: underline;
  }
}

.leaflet-container {
  .leaflet-control-attribution, .leaflet-control-scale {
    &, * {
      font-size: $fs-small;
    }
  }
}

.leaflet-left .leaflet-control-scale {
  margin-left: 5px;
}

.leaflet-bottom .leaflet-control-scale {
  margin-bottom: 5px;
}

.leaflet-control-scale-line {
  border: 2px solid #777;
  border-top: none;
  line-height: 1.1em;
  padding: 2px 5px 1px;
  font-size: $fs-small;
  white-space: nowrap;
  overflow: hidden;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  background: #fff;
  background: rgba(255, 255, 255, 0.5);
  &:not(:first-child) {
    border-top: 2px solid #777;
    border-bottom: none;
    margin-top: -2px;
    &:not(:last-child) {
      border-bottom: 2px solid #777;
    }
  }
}

.leaflet-touch {
  .leaflet-control-attribution, .leaflet-control-layers, .leaflet-bar {
    box-shadow: none;
  }
  .leaflet-control-layers, .leaflet-bar {
    border: 2px solid rgba(0, 0, 0, 0.2);
    background-clip: padding-box;
  }
}

/* popup */

.leaflet-popup {
  position: absolute;
  z-index: 2;
  @include text-align(center);
  .leaflet-popup-content-wrapper {
    @include text-align(left);
    @include menu-box;
    background: white;
    border: none;
    .leaflet-popup-content {
      .popup-header {
        .popup-block-content{
          width: 100%;
          display: flex;
          justify-content: space-between;
        }
      }
      .popup-content, .popup-header, .popup-footer {
        padding: $default-gap 2*$default-gap;
      }
      .popup-header, .popup-footer {
        background-color: $popover-title-bg;
      }
      .popup-content {
        .popup-block-label {
          display: block;
          @include legend-label;
        }
        &:last-child {
          padding-bottom: 2*$default-gap;
        }
      }
    }
  }
  .leaflet-popup-tip-container {
    margin: 0 auto;
    width: 40px;
    height: 20px;
    position: relative;
    overflow: hidden;
    .leaflet-popup-tip {
      width: 17px;
      height: 17px;
      padding: 1px;
      margin: -10px auto 0;
      position: relative;
      z-index: 11;
      @include rotate(45deg);
      background: white;
      @include menu-shadow;
    }
  }
  .leaflet-container & a.leaflet-popup-close-button {
    $size: 18px;
    $padding: round($default-gap * 0.4);
    @include menu-box;
    position: absolute;
    top: -1 * round(($size + $padding) / 2);
    right: -1 * round(($size + $padding) / 2);
    padding: $padding;
    @include border-radius(50%);
    @include text-align(center);
    width: $size;
    height: $size;
    font-size: $size;
    line-height: $size;
    text-decoration: none;
    font-weight: bold;
  }
}



.leaflet-popup-scrolled {
  overflow: auto;
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
}

.leaflet-oldie {
  .leaflet-popup-content-wrapper {
    zoom: 1;
  }
  .leaflet-popup-tip {
    width: 24px;
    margin: 0 auto;
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
  }
  .leaflet-popup-tip-container {
    margin-top: -1px;
  }
  .leaflet-control-zoom, .leaflet-control-layers, .leaflet-popup-content-wrapper, .leaflet-popup-tip {
    border: 1px solid #999;
  }
}

/* div icon */

.leaflet-div-icon {
  background: #fff;
  border: 1px solid #666;
}


/* ================================================================== */
/* Toolbars
/* ================================================================== */

.leaflet-draw-section {
  position: relative;
}

.leaflet-draw-toolbar {
  margin-top: 12px;
}

.leaflet-draw-toolbar-top {
  margin-top: 0;
}

.leaflet-draw-toolbar-notop a:first-child {
  border-top-right-radius: 0;
}

.leaflet-draw-toolbar-nobottom a:last-child {
  border-bottom-right-radius: 0;
}


/* ================================================================== */
/* Toolbar actions menu
/* ================================================================== */

.leaflet-draw-actions {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  left: $map-button-size;
  /* leaflet-draw-toolbar.left + leaflet-draw-toolbar.width */
  top: 0;
  white-space: nowrap;
}

.leaflet-right .leaflet-draw-actions {
  right: $map-button-size;
  left: auto;
}

.leaflet-draw-actions li {
  display: inline-block;
  &:first-child a {
    border-left: none;
  }
  &:last-child a {
    -webkit-border-radius: 0 $default-border-radius $default-border-radius 0;
    border-radius: 0 $default-border-radius $default-border-radius 0;
  }
}

.leaflet-right .leaflet-draw-actions li {
  &:last-child a {
    @include border-radius(0);
  }
  &:first-child a {
    -webkit-border-radius: $default-border-radius 0 0 $default-border-radius;
    border-radius: $default-border-radius 0 0 $default-border-radius;
  }
}

.leaflet-draw-actions a {
  background-color: #919187;
  border-left: 1px solid #AAA;
  color: #FFF;
  font: $fs-small/$lh-small $base-font-family;
  line-height: 28px;
  text-decoration: none;
  padding-left: 10px;
  padding-right: 10px;
  height: 28px;
}

.leaflet-draw-actions-bottom {
  margin-top: 0;
}

.leaflet-draw-actions-top {
  margin-top: 1px;
  a {
    height: $map-button-size + 1px;
    line-height: $map-button-size + 1px;
  }
}

.leaflet-draw-actions-bottom a {
  height: $map-button-size + 1px;
  line-height: $map-button-size + 1px;
}

.leaflet-draw-actions a:hover {
  background-color: #A0A098;
}

.leaflet-draw-actions-top.leaflet-draw-actions-bottom a {
  height: $map-button-size;
  line-height: $map-button-size;
}

/* ================================================================== */
/* Draw toolbar
/* ================================================================== */

.leaflet-draw-toolbar {
  .leaflet-draw-draw-polyline {
    @include use-icon(angle-down);
  }
  .leaflet-draw-draw-polygon {
    @include use-icon(star-o);
  }
  .leaflet-draw-draw-rectangle {
    @include use-icon(square-o);
  }
  .leaflet-draw-draw-circle {
    @include use-icon(circle-thin);
  }
  .leaflet-draw-draw-marker {
    @include use-icon(map-marker);
  }
  .leaflet-draw-edit-edit {
    @include use-icon(edit);
  }
  .leaflet-draw-edit-remove {
    @include use-icon(times);
  }
}

/* ================================================================== */
/* Edit toolbar
/* ================================================================== */

/* ================================================================== */
/* Drawing styles
/* ================================================================== */

.leaflet-mouse-marker {
  background-color: #fff;
  cursor: crosshair;
}

.leaflet-draw-tooltip {
  background: rgb(54, 54, 54);
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid transparent;
  @include border-radius($default-border-radius);
  color: #fff;
  font: $fs-normal/$lh-normal $base-font-family;
  margin-left: 20px;
  margin-top: -21px;
  padding: 4px 8px;
  position: absolute;
  visibility: hidden;
  white-space: nowrap;
  z-index: 6;
  &:before {
    border-right: 6px solid black;
    border-right-color: rgba(0, 0, 0, 0.5);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    content: "";
    position: absolute;
    top: 7px;
    left: -7px;
  }
  span {
    color: inherit;
  }
}

.leaflet-error-draw-tooltip {
  background-color: #F2DEDE;
  border: 1px solid #E6B6BD;
  color: #B94A48;
  &:before {
    border-right-color: #E6B6BD;
  }
}

.leaflet-draw-tooltip-single {
  margin-top: -12px;
}

.leaflet-draw-tooltip-subtext {
  color: #f8d5e4;
}

.leaflet-draw-guide-dash {
  font-size: 1%;
  opacity: 0.6;
  position: absolute;
  width: 5px;
  height: 5px;
}

.leaflet-draw-tooltip-top {
  background: rgb(54, 54, 54);
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid transparent;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  color: #fff;
  font: 12px/18px "Helvetica Neue", Arial, Helvetica, sans-serif;
  margin-left: 0;
  margin-top: -38px;
  padding: 4px 8px;
  position: absolute;
  visibility: hidden;
  white-space: nowrap;
  z-index: 6;
  &:before {
    border-top: 6px solid black;
    border-top-color: rgba(0, 0, 0, 0.5);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    content: "";
    position: absolute;
    top: 30px;
    @include calc('left','50% - 3px');
  }

  transition: margin-left 1s ease;

}

/* ================================================================== */
/* Edit styles
/* ================================================================== */

.leaflet-edit-marker-selected {
  background: rgba(254, 87, 161, 0.1);
  border: 4px dashed rgba(254, 87, 161, 0.6);
  @include border-radius($default-border-radius);
}

.leaflet-edit-move {
  cursor: move;
}

.leaflet-edit-resize {
  cursor: pointer;
}

/* ================================================================== */
/* Old IE styles
/* ================================================================== */

.leaflet-oldie {
  .leaflet-draw-toolbar {
    border: 3px solid #999;
    a {
      background-color: #eee;
      &:hover {
        background-color: #fff;
      }
    }
  }
  .leaflet-draw-actions {
    left: 32px;
    margin-top: 3px;
    li {
      display: inline;
      zoom: 1;
    }
  }
  .leaflet-edit-marker-selected {
    border: 4px dashed #fe93c2;
  }
  .leaflet-draw-actions a {
    background-color: #999;
    &:hover {
      background-color: #a5a5a5;
    }
  }
  .leaflet-draw-actions-top a {
    margin-top: 1px;
  }
  .leaflet-draw-actions-bottom a {
    height: 28px;
    line-height: 28px;
  }
  .leaflet-draw-actions-top.leaflet-draw-actions-bottom a {
    height: 27px;
    line-height: 27px;
  }
}


/* ================================================================== */
/* Legends
/* ================================================================== */

.leaflet-legend-control {
  $cell-height: $fs-small;
  @include menu-box;
  min-width: 220px;

  &.empty {
    display: none;
  }

  .leaflet-legend-item {
    padding: $default-gap;
    border-top: $menu-border;
    display: block;
    min-width: 15 * $lh-normal;
    max-width: 18 * $lh-normal;
    &.first,
    &:first-child {
      border-top: none;
    }
    h3 {
      color: $text-color;
      font-size: $fs-normal;
      line-height: $lh-normal;
      font-weight: bold;
    }
    .leaflet-legend-body {
      .min-value, .max-value {
        color: $neutral-color;
        font-size: $fs-small;
        line-height: $lh-small;
        font-weight: bold;
      }
    }

    &.minified {
      height: 0;
      padding: 0;
      overflow: hidden;
      transition: 1s ease;
    }
  }

  .leaflet-bubbles-scale {
    text-align: center;
    .min-value {
      @include margin-right($default-gap);
    }
    .max-value {
      @include margin-left($default-gap);
    }
    .leaflet-bubbles-grades {
      .leaflet-bubbles-grade {
        @include inline-block;
        @include border-radius(50%);
        margin: 0 round(0.6*$default-gap);
        border-style: solid;
      }
    }
  }

  .leaflet-categories-scale {
    .leaflet-categories-items {
      .leaflet-categories-item {
        display: flex;

        margin-top: round($default-gap * 0.3);
        &:first-child {
          margin-top: 0;
        }
        .leaflet-categories-sample {
          @include inline-block;
          height: $cell-height;
          width: $cell-height;
          @include border-radius(50%);
          border: 1px solid #333;
          align-self: center;
        }
        .leaflet-categories-item_label {
          display: inherit;
          margin-left: $default-gap;
          color: $neutral-color;
          font-size: $fs-small;
          line-height: $lh-small;
          font-weight: bold;
          text-transform: uppercase;
          &.zoom-guidance {
            display: none;
            color: #CD554B;
          }
        }
      }
    }
  }

  .leaflet-choropleth-scale {
    .min-value {
      @include float(left);
    }
    .max-value {
      @include float(right);
    }
    .leaflet-choropleth-grades {
      display: block;
      clear: both;
      $border: 1px solid #333;
      // margin: $default-gap 0 0 0;
      // width: 15 * $lh-normal;
      height: $cell-height;
      border: $border;
      .leaflet-choropleth-grade {
        @include inline-block;
        vertical-align: top;
        height: $cell-height;
      }
    }
  }
  .leaflet-legend-circle {
    width: 20px;
    height: 20px;
    border: 1px solid #000000;
    @include inline-block;
    border-radius: 50%;
    margin-top: 8px;
  }

  &.leaflet-hidden-control {
    display: none;
  }
}



i.leaflet-importer-ctrl, button.leaflet-importer-ctrl {
  @include is-icon;
  @include use-icon(download);
  color: $active-link-color;
  width: $map-button-size;
  height: $map-button-size;
  line-height: $map-button-size;
}

span.leaflet-importer-geojson, span.leaflet-importer-gml {
  font-size: $default-gap;
}

.leaflet-multilevel-legend {
  i {
    display: inline-block;
    width: 18px !important;
    height: 18px !important;

    &.active {
      @include is-icon(10px);
      @include use-icon(check);
      color: white;
      text-align: center;
    }
  }
  span {
    display: inline-block;
    margin-left: 10px;
  }
}

.leaflet-reference-label {
  //background-color: #fff;
}

.leaflet-ghost-label {
  &:before, &:after {
    box-shadow: none;
    border: none;
    background: transparent;
  }
  .leaflet-ghost-label-collapsed {
    color: $active-color;
    background: white;
    font-weight: bold;
    /* text-shadow: none; */
    display: block;
    min-width: $lh-normal;
    /* height: 20px; */
    border-radius: 50%;
    border: $menu-border;
    /* background-color: white; */
    text-align: center;
  }
}


.leaflet-popup-warning {
  @include is-icon;
  @include use-icon(warning);
  &.hide {
    display: none;
  }
  &.right {
    @include float(right);
  }
}

.choice-padding {
  @include inline-block;
  margin-right: 15px;

  input[type=radio] {
    margin-right: 3px;
  }
}

.modal-header {
  .leaflet-importer-ctrl {
    color: black;
  }
  span {
    margin-left: 10px;
    font-size: 18px;
  }
}

.leaflet-control-measure-toggle{
  visibility: hidden;
  &:before {
    visibility: visible;
    font-size: 26px;
    line-height: 44px;
    text-align: center;
    vertical-align: middle;
    width: 44px;
    display: block;
    height: 44px;
  }
}

.leaflet-dynamic {
  color: $text-color;
  @include text-align(center);

  &.loading {
    @include is-icon;
    @include use-icon(circle-o-notch);
    @include animation(loading-rotate 2s infinite linear);
    width: $map-button-size;
    height: $map-button-size;
    line-height: $map-button-size;
    background-color: $white;
    border-radius: 50%;
  }

  &.error {
    @include is-icon;
    @include use-icon(exclamation-circle);
    width: $map-button-size;
    height: $map-button-size;
    line-height: $map-button-size;
    background-color: $white;
    border-radius: 50%;
  }
}
